<template>
  <div id="order">
    <section @click="$commonJs.goPage('shoppingChooseAddress')">
      <md-cell-item
        v-if="address"
        :title="address.name + ' ' + address.mobile"
        :brief="address.addressDetail"
        arrow
      ></md-cell-item>
      <md-cell-item
        v-else
        title="暂无地址"
        brief="请前往添加地址"
        arrow
      ></md-cell-item>
    </section>
    <section>
      <md-cell-item title="商品详情">
        <div slot="children" class="children">
          <div class="goods" v-for="(item, index) in data" :key="index">
            <img :src="$api.imgUrl + img[index]" alt="" />
            <div class="detail">
              <span class="name">{{ item.name }}</span
              ><br />
              <span class="brand">规格：{{ item.size }}</span>
            </div>
            <div class="price-box">
              <span class="price">￥{{ item.price }}</span
              ><br />
              <span class="count">x {{ item.num }}</span>
            </div>
          </div>
        </div>
      </md-cell-item>
    </section>
    <md-action-bar :actions="btns" @click="onBtnClick">
      <span class="price">
        &yen; <md-amount :value="price" has-separator></md-amount>
      </span>
    </md-action-bar>
  </div>
</template>

<script>
import { CellItem, Stepper, ActionBar, Amount } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Amount.name]: Amount,
    [ActionBar.name]: ActionBar,
    [Stepper.name]: Stepper,
    [CellItem.name]: CellItem
  },
  data() {
    return {
      data: [],
      btns: [
        {
          text: "去付款"
        }
      ],
      img: [],
      address: null,
      count: 1,
      price: 0
    };
  },
  methods: {
    getInfo() {
      this.$ajax
        .post(this.$api.preShopCar, false, false)
        .then(res => {
          this.data = res.data.data;
          this.price = res.data.total;
          this.data.forEach(item => {
            this.img.push(JSON.parse(item.img)[0]);
          });
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    onBtnClick() {
      if (!this.address) {
        this.$toast.failed("请添加收货地址！");
        return false;
      }
      let arr = [];
      this.data.forEach(item => {
        let obj = {
          product_id: item.product_id,
          num: item.num
        };
        arr.push(obj);
      });
      let data = {
        product_info: JSON.stringify(arr),
        address_id: this.address.id
      };
      this.$ajax
        .post(this.$api.createOrder, data)
        .then(res => {
          this.$store.dispatch("changeOrder", {
            order_num: res.data.order_num
          });
          this.$commonJs.goPage("shoppingPayMethod");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    getAddressInfo() {
      this.$ajax
        .post(this.$api.addressList, false, false)
        .then(res => {
          let result = res.data.data;
          if (this.order.address) {
            this.address = result.find(item => {
              if (item.id === this.order.address) {
                return item;
              }
            });
          } else {
            this.address = result.find(item => {
              if (item.is_fault === 2) {
                return item;
              }
            });
          }
          if (!this.address) {
            if (res.data.data.length !== 0) {
              this.address = res.data.data[0];
            }
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  computed: {
    order() {
      return this.$store.state.order;
    }
  },
  created() {
    this.getAddressInfo();
    this.getInfo(true);
  }
};
</script>

<style scoped lang="stylus">
section{
  background white
  padding 0 24px
  margin-top 19px
  .children{
    .goods{
      flex_content();
      font-size 18px;
      line-height 50px
      border-bottom 1px solid #f8f8f8
      img{
        width 174px
        height 174px
        margin-right 20px
      }
      .detail{
        flex_one();
        .name{
          font-size 24px
        }
        .brand{
          color #959595
          display inline-block
          padding 5px 10px
          border-radius 10px
          background #f0f0f0
        }
      }
      .price-box{
        width 120px
        text-align right
        .count{
          color #959595
        }
      }
    }

    .count-box{
      padding 24px
      font-size 18px
      border-top 1px solid #f0f0f0
      flex_content();
      flex_align_center();
      flex_justify_end();
    }
  }
}
.price{
  font-size:26px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(237,114,24,1);
}
</style>
